<!DOCTYPE html>
<html>
	<head>
		<meta charset="{CHARSET}">
		<title>利用 clip-path 实现环形进度条</title>
		<style type="text/css">
			* {
				margin: 0;
				padding: 0;
			}

			#circle,
			.test1 {
				width: 200px;
				height: 200px;
				border-radius: 50%;
			}

			#circle {
				background-color: #ccc;
				text-align: center;
				position: relative;
				left: 50px;
				top: 50px;
			}

			.test2 {
				background-color: blue;
				/*position: absolute;*/
				/*clip: rect(0px,200px,200px,100px);*/
				/*-webkit-clip-path:polygon(50% 50%,50% 0%,100% 0%,100% 100%,0% 100%,0% 0%,30% 0%);*/
			}

			.circle-ban {
				width: 170px;
				height: 170px;
				border-radius: 50%;
				background-color: white;
				position: absolute;
				top: 15px;
				left: 15px;
			}

			.circle-ban p {
				margin-top: 76px;
			}
		</style>
	</head>
	<body>
		<div id="circle">
			<div class="test1"></div>
			<div class="circle-ban">
				<p><span class="mask">0</span>%</p>
			</div>
		</div>
		<script src="http://libs.baidu.com/jquery/2.0.0/jquery.min.js"></script>
		<script type="text/javascript">
			function press(r) {
				/* 百分比与角度的关系
				 * 100%对应360度->1%=3.6deg
				 * 角度与周长的关系
				 * 360度对应长度为800->0.45deg=1px
				 * 百分比与周长的关系
				 * 100%对应周长800->0.125%=1px           
				 * ----->1%=8px
				 * 45deg=100px(角度对应的周长)=50%(clip-path中的百分比)
				 * ------->100%(百分比值)=400%(clip-path中的百分比)
				 */

				var r = r * 4;
				var div = $(".test1");
				div.addClass("test2");
				var k1 = "polygon(50% 50%,50% 0%,";
				var k2 = k1 + "100% 0%,";
				var k3 = k2 + "100% 100%,";
				var k4 = k3 + "0% 100%,";
				var k5 = k4 + "0% 0%,";
				if (r <= 50) {
					r += 50;
					div.css({
						"-webkit-clip-path": k1 + r + "% 0%)"
					});
				} else if ((r > 50) && (r <= 150)) {
					r -= 50;
					div.css({
						"-webkit-clip-path": k2 + "100% " + r + "%)"
					});
				} else if ((r > 150) && (r <= 250)) {
					r = 250 - r;
					div.css({
						"-webkit-clip-path": k3 + r + "% 100%)"
					});
				} else if ((r > 250) && (r <= 350)) {
					r = 350 - r;
					div.css({
						"-webkit-clip-path": k4 + "0% " + r + "%)"
					});
				} else if ((r > 350) && (r <= 400)) {
					r -= 350;
					div.css({
						"-webkit-clip-path": k5 + r + "% 0%)"
					});
				}
			}
			var n = 0;
			var timer = setInterval((function() {
				n++;
				if (n == 100) {
					clearInterval(timer);
					timer = null;
				}
				$(".mask").text(n);
				press(n);
			}), 100);
		</script>
	</body>
</html>
